<template>
    <rx-layout :leftStyle="{width:'230px'}">
        <template #left>
            <rx-category-treeeditor
                cat-key="BPM"
                :statisticConfig="statisticConfig"
                read-key="inst.read"
                :edit="false"
                @handSelect="handSelect"
                :treeRootList="treeRootList"
                :isBpmClient="isBpmClient"
                :isMyBpm="isMyBpm"
                :async="true">
            </rx-category-treeeditor>
        </template>
        <template #middle>
            <div style="padding: 10px;width: 100%;height: 100%">
                <rx-fit v-model="fitSearch">
                    <template #head>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <div class="table-operator">
                                {{ i18n('list.forwardTask','我的抄送') }}
                            </div>
                            <span class="search-btn" @click.stop="searchshow" @mousedown.stop><SearchOutlined/>{{ $ti18('rxList.leachBtn', '过滤') }}</span>
                        </div>
                    </template>
                    <template #search>
                        <a-form layout="vertical">
                            <a-form-item :label="i18n('form.itemTitle','事项标题')">
                                <a-input :placeholder="i18n('form.itemTitle','事项标题','input')"
                                         v-model:value="urlConfig.queryParam['Q_SUBJECT__S_LK']"/>
                            </a-form-item>
                            <a-form-item :label="i18n('form.billNo','单号')">
                                <a-input :placeholder="i18n('form.billNo','单号','input')"
                                         v-model:value="urlConfig.queryParam['Q_BILL_NO__S_EQ']"/>
                            </a-form-item>
                        </a-form>
                        <div class="list-search-toolbar">
                            <a-button type="primary" @click="search">
                                <SearchOutlined/>
                                {{ $ti18('rxList.searchBtn', '查询') }}
                            </a-button>
                            <a-button style="margin-left: 4px" @click="resetSearch">
                                <RedoOutlined />
                                {{ $ti18('rxList.resetBtn', '重置') }}
                            </a-button>
                        </div>
                    </template>
                    <template #middle>
                        <rx-grid ref="table"
                                 :hasPage="true"
                                 :urlConfig="urlConfig"
                                 :selectConfig="selectConfig"
                                 url="/api-bpm/bpm/core/bpmInstCc/getMyTurnTo"
                                 field="taskId"
                                 :columns="columns"
                        >
                            <template #ccType="{row}">
                                <a-tag :color="typeMap[row.ccType].color">
                                    <span>{{typeMap[row.ccType].text}}</span>
                                </a-tag>
                            </template>
                            <template #action="{ row }">
                                <RxGridAction :size="2">
                                    <span @click="onDetail(row)" :title="$ti18('rxList.detailBtn','明细')">{{$ti18('rxList.detailBtn','明细')}}</span>
                                    <span @click="showCcInfo(row)" :title="i18n('list.reading','阅读情况')">{{i18n('list.reading','阅读情况')}}</span>
                                </RxGridAction>
                            </template>
                        </rx-grid>
                    </template>
                </rx-fit>
                <bpm-inst-cc-detail :inst-id="instId" v-model:instCcShow="instCcShow" ></bpm-inst-cc-detail>
            </div>
        </template>
    </rx-layout>
</template>

<script>
import {RxLayout, RxLangInput, RxFit,BaseList,Util} from '@lowcode/jpaas-base-lib';
import FlowUtil from "@/views/modules/bpm/js/FlowUtil.js"
import { App } from '@lowcode/jpaas-share-component';
import TaskBatApprove from "@/views/modules/bpm/ws/TaskBatApprove.vue";
import userUser from "@/stores/userUser";
import { mapState } from 'pinia';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import instAndTaskShare from "@/views/modules/column/processOverview/instAndTaskShare.js";
import  rxCategoryTreeeditor from "@/views/modules/column/processOverview/rx-category-treeeditor.vue"
import BpmInstCcDetail from './BpmInstCcDetail.vue'

export default {
    name: "MyBpmTurnTo",
    components: {RxLayout, RxFit, RxLangInput,rxCategoryTreeeditor,BpmInstCcDetail},
    mixins: [BaseList,App,FlowUtil,instAndTaskShare],
    computed:{
        ...mapState(userUser, ['user'])
    },
    data() {
        return {
            locale,
            instId:'',
            instCcShow:false,
            urlConfig: {
                ajaxType: 'post',
                contentType: 'json',
                queryParam: {},
                dataField: 'result.data',
                totalField: 'result.totalCount'
            },
            selectConfig: {
                type: 'checkbox'
            },
            columns: [
                {
                    title: this.i18n('form.itemTitle', '事项标题'),
                    field: 'subject',
                    minWidth: 180,
                },
                {
                    title: this.i18n('form.billNo', '单号'),
                    field: 'billNo',
                    minWidth: 180,
                },
                {
                    title: this.i18n('form.nodeName','转发节点'),
                    field: 'nodeName',
                    minWidth: 120,
                },
                {
                    title: this.i18n('form.createTime','转发时间'),
                    field: 'createTime',
                    minWidth: 140,
                },
                {
                    title: this.i18n('form.ccType','转发/抄送'),
                    field: 'ccType',
                    minWidth: 80,
                    slots: {default: 'ccType'},
                },
                {
                    title: this.$ti18('rxList.action', '操作'),
                    field: 'action',
                    minWidth: 120,
                    allowCellEdit: false,
                    slots: {default: 'action'},
                },
            ],
            typeMap: {
                "COPY": { color: 'green', text: this.i18n('typeMap.cc','抄送') },
                "TURN_TO": { color: 'red', text: this.i18n('typeMap.forward','转发') },
            },
            treeRootList:[],
            statisticConfig: {
                type:"static_bpm",
                table:"BPM_INST_CC",
                field:"TREE_ID_",
                whereConf:[{name:"FROM_USER_ID_",type:"string",dateFormat:"",op:"=",value:"curUserId",valueType:"context"}]
            },
            readKey:"task.read",
            readType:"instCcHist",
            isBpmClient:false,
            isMyBpm:true,
        }
    },
    created() {
        let appId=this.curApp.appId;
        if(appId){
            this.urlConfig.queryParam.Q_APP_ID__S_EQ=appId;
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"MyTurnTo",key);
        },
        handleTask(record) {
            this.openInst(record.appId,record.instId,record.taskId);
        },
        resetSearch() {
            this.urlConfig.queryParam = {};
            debugger
            let appId=this.curApp.appId;
            if(appId){
                this.urlConfig.queryParam.Q_APP_ID__S_EQ=appId;
            }
            this.$nextTick(() => {
                this.$refs['table'].loadData();
            })
        },
        getPopupContainer(p){
            return p.parentNode ;
        },
        handSelect(curRow) {
            this.loadDataBySelectTreeNode(curRow);
        },
        onDetail(record){
            this.openDetail(record.appId,record.instId);
        },
        showCcInfo(record){
            this.instId=record.instId;
            this.instCcShow=true;
        },
    },
    watch: {},
}
</script>

<style scoped>

</style>
